<template>
    <div >
        <!-- 头部 -->
        <div v-show="flag" class="box" :style="showObj">
            <router-link to="/" tag="div">
                <span>></span>
            </router-link>
            <div>城市详情页面</div>
            <div></div>
        </div>
    </div>
</template>
<script>
    export default{
        name:'detail-header',
        data(){
            return{
                flag:false,
                showObj:{
                    opacity:.8
                }
            }
        },
        methods:{
            detailstylechange(){
                let top=document.documentElement.scrollTop;
                // console.log(top)
                if(top>300){//显示隐藏
                    let opacity=top/1000
                    opacity>1?1:opacity; 
                    this.showObj={
                        opacity:opacity
                    }
                    this.flag=true
                }else{
                    this.flag=false
                }
            }
        },
        mounted(){//生命周期函数
            window.addEventListener("scroll",this.detailstylechange)//绑定滚动
        }
    }
</script>
<style lang="stylus">
    .box{
        width 100%
        height 50px
        color:#fff;
        font-size 20px
        background-color #00FFE9
        display flex
        justify-content space-between
        align-items center
        margin-top 0
        position fixed
        opacity .5
    }
    .box div{
        display flex
        justify-content center
    }
    .box div div{
        margin:0 10px
    }
</style>